
<template>
  <div class="active-tree-content">
    <el-table :data="activeTypeList" border>
      <el-table-column
        label="活动类型"
      >
        <template slot-scope="{row}">
          <el-checkbox v-model="row.isChecked" :label="row.id" @change="checkBoxChange(row)">
            <span class="row-txt">{{ row.activityType }}</span>
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        label="技术服务费"
        align="center">
        <template slot-scope="{row}">
          <div :class="['row-txt edit-div']" :contenteditable="true" 
          @input="divInput($event, row, 'serveFee')"
          @blur="divBlur($event, row, 'serveFee')"
          >{{ row['serveFee'] || '0' }}</div>
          <i v-if="row.serveFee_error" class="error-msg">请输入正确的金额</i>
        </template>
      </el-table-column>
      <el-table-column
        label="服务费抽成比例"
        align="center">
        <template slot-scope="{row}">
          <div :class="['row-txt edit-div']" :contenteditable="true" 
          @input="divInput($event, row, 'commission')"
          @blur="divBlur($event, row, 'commission')">{{ row['commission'] || '0' }}</div>
          <i v-if="row.commission_error" class="error-msg">请输入正确的金额</i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import {isDecimal} from '@/utils/tools.js'
export default {
  props: {
    value: {
      type: Array,
      default: []
    },
    list: {
      type: Array,
      default: []
    }
  },
  watch: {
    value: {
      handler: async function (arr) {
        if(!arr || !arr.length) return
        arr.forEach(item => {
          let i = this.activeTypeList.find(it => it.id == item.activityTypeId)
          if(i){
            this.$set(i, 'serveFee', item.serveFee || '0')
            this.$set(i, 'commission', item.commission || '0')
            this.$set(i, 'isChecked', true)
            item.id && this.$set(i, 'emitId', item.id)
          }
        })
        
      },
      immediate: true
    }
  },
  data() {
    return {
      activeTypeList: JSON.parse(JSON.stringify(this.list))
    };
  },
  mounted(){
    let _self = this
  },
  methods: {
    divInput(e, row, type){
      let {innerText} = e.target, _self = this
      if(innerText == '') return
      _self.$set(row, `${type}_error`, !isDecimal(`${innerText}`))
    },
    divBlur(e, row, type){
      let {innerText} = e.target, _self = this
      _self.$set(row, `${type}`, innerText)
      _self.checkBoxChange()
    },
    checkBoxChange(row){
      let _self = this
      let selectedArr = _self.activeTypeList.filter(i => i.isChecked)
      let arr = selectedArr.map(i => {
        let obj = {}
        obj.activityTypeId = i.id,
        obj.serveFee = i.serveFee || '0',
        obj.commission = i.commission || '0'
        i.emitId && (obj.id = i.emitId) 
        return obj
      })
      _self.$emit('input', arr)
    },
  }
};
</script>
<style scoped lang="scss">
  .active-tree-content ::v-deep{
    width: vw(800);
    .row-txt{
      font-size: vh(13);
    }
    .error-msg{
      position: absolute;
      font-size: vh(13);
      color: #d81e06;
      font-style: normal;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner{
      background-color: transparent;
    }
  }
  </style>